<template>
  <view class="container">
    <!-- 标题 -->
    <view class="header">
      <text class="title">继续填写</text>
	  <view class="steps">
	  	<image src="https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf29eaa460.png" class="steps-img"></image>
	  	<view class="steps-title">
	  		<text class="steps-text">填写基本信息</text>
	  		<text class="steps-text">选择职位要求</text>
	  	</view>
	  </view>
    </view>

    <!-- 填写基本信息 -->
    <view class="section">
      <view class="form-item" @click="showExperiencePicker = true">
        <text class="label">经验要求</text>
		<view class="form-container">
			<text class="value">{{ experience }}</text>
			<uni-icons type="arrowright" size="16" color="#000" ></uni-icons>
		</view>
      </view>
      <view class="form-item" @click="showEducationPicker = true">
        <text class="label">最低学历</text>
		<view class="form-container">
			<text class="value">{{ education }}</text>
			<uni-icons type="arrowright" size="16" color="#000" ></uni-icons>
		</view>
      </view>
      <view class="form-item" @click="showSalaryPicker = true">
        <text class="label">薪资范围</text>
		<view class="form-container">
			<text class="value">{{ salary }}</text>
			<uni-icons type="arrowright" size="16" color="#000" ></uni-icons>
		</view>
      </view>
    </view>

    <!-- 发布按钮 -->
    <button class="publish-button" @click="handlePublish">发布</button>

    <!-- 经验要求选择器 -->
    <picker
      mode="selector"
      :range="experienceOptions"
      @change="handleExperienceChange"
      v-if="showExperiencePicker"
    >
      <view class="picker-mask" @click="showExperiencePicker = false"></view>
    </picker>

    <!-- 最低学历选择器 -->
    <picker
      mode="selector"
      :range="educationOptions"
      @change="handleEducationChange"
      v-if="showEducationPicker"
    >
      <view class="picker-mask" @click="showEducationPicker = false"></view>
    </picker>

    <!-- 薪资范围选择器 -->
    <picker
      mode="selector"
      :range="salaryOptions"
      @change="handleSalaryChange"
      v-if="showSalaryPicker"
    >
      <view class="picker-mask" @click="showSalaryPicker = false"></view>
    </picker>
  </view>
</template>

<script>
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'; // 根据实际路径调整
export default {
	components: {
	    uniIcons,
	  },
  data() {
    return {
      // 当前选中的值
      experience: "不限",
      education: "本科",
      salary: "不限",

      // 选择器选项
      experienceOptions: ["不限", "1-3年", "3-5年", "5年以上"],
      educationOptions: ["本科", "硕士", "博士", "其他"],
      salaryOptions: ["不限","3–6K","6–10K", "10–15K", "15–20K", "20K以上"],

      // 控制选择器显示
      showExperiencePicker: false,
      showEducationPicker: false,
      showSalaryPicker: false,
    };
  },
  methods: {
    // 处理经验要求选择
    handleExperienceChange(e) {
      const index = e.detail.value;
      this.experience = this.experienceOptions[index];
      this.showExperiencePicker = false;
    },

    // 处理最低学历选择
    handleEducationChange(e) {
      const index = e.detail.value;
      this.education = this.educationOptions[index];
      this.showEducationPicker = false;
    },

    // 处理薪资范围选择
    handleSalaryChange(e) {
      const index = e.detail.value;
      this.salary = this.salaryOptions[index];
      this.showSalaryPicker = false;
    },

    // 发布按钮点击事件
    handlePublish() {
      uni.showToast({
        title: "发布成功",
        icon: "success",
      });
	  uni.navigateTo({
	    url: '/pages/login/certification',
	  });
    },
	
  },
};
</script>

<style>
.container {
  padding: 20px;
  background-color: #f9f9f9;
}

.header {
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.steps{
	text-align: center;
}

.steps-img{
	text-align: center;
	width: 269px;
	height: 21px;
}

.steps-title{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.steps-text{
	color: #343434;
	font-family: "PingFang SC";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	
}

.section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #555;
  margin-bottom: 15px;
}

.section uni-icons {
  vertical-align: middle; /* 垂直居中 */
  margin-left: 8px; /* 调整图标与输入框的间距 */
}

.form-item {
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
}

.label {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  display: block;
}

.form-container {
  display: flex;
  justify-content:space-between;
  align-items: center; /* 垂直居中 */
  padding-right: 8px; /* 右侧内边距，避免图标紧贴边框 */
}

.form-container .value {
  height: 50px; 
  line-height: 50px;
  flex: 1; /* 占据剩余空间 */
  border: none; /* 去掉默认边框 */
  outline: none; /* 去掉聚焦时的外边框 */
  font-size: 14px;
}

/* .value {
  font-size: 16px;
  color: #666;
} */

.publish-button {
  width: 100%;
  height: 40px;
  background: linear-gradient(90deg, #9A9AFF 0%, #D6D6FE 100%);
  color: #ffffff;
  border-radius: 32px;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.picker-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
</style>